<template>
    <div>
        <el-container>
            <el-header class="header-all">
                <!-- 查询区域 -->
                <div style="display: inline;">
                    <el-select placeholder="请选择角色" v-model="user.namecn">
                        <el-option v-for="item in mynamecn" :key="item.namecn" :label="item.namecn" :value="item.namecn"></el-option>
                    </el-select>
                    <el-button type="primary" class="but-select" @click="select">搜索</el-button>
                </div>
            </el-header>
            <el-main>
                <el-table :data="UsersList">
                    <el-table-column prop="code" width="160px" label="分类编号"></el-table-column>
                    <el-table-column prop="namecn" width="160px" label="分类名称"></el-table-column>
                    <el-table-column prop="parentid" width="130px" label="上级分类"></el-table-column>
                    <el-table-column prop="comment" width="200px" label="其他说明">
                        <template slot-scope="scope">
                            <el-button type="success" plain @click="upd(scope.$index, scope.row)">修改</el-button>
                            <el-button type="danger" plain @click="del(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>
    </div>
</template>
<script>
export default {
    name: "zichan",
    data() {
        return {
            UsersList: [],
            user: {
                comment: "",
                
                code: "",
               
                namecn: "",
                parentid: "",

            },
            mynamecn: ""

        }
    },
    created() {
        this.getJsonUser()
        this.getJsonnamecn()
    },
    methods: {
        getJsonUser() {
            console.log("进入加载列表数据方法")
            var rul = "http://121.37.241.58:8883/logic/baseInfo/category/find"
            this.$axios.get(rul).then(re => {
                console.log(re.data)
                this.UsersList = re.data
            });
        },
        getJsonnamecn() {
            console.log("进入加载下拉框数据方法")
            var rul = "http://121.37.241.58:8883/logic/baseInfo/category/parentList"
            this.$axios.get(rul).then(re => {
                console.log("-------")
                console.log(re.data)
                this.mynamecn = re.data
                this.mynamecn.push({ "namecn": "全部" })
            });
        },
        select() {
            console.log(this.user.namecn)
            console.log("进入数据搜索列表数据方法")
            // 默认查询接口 
            var rul = "http://121.37.241.58:8883/logic/baseInfo/category/find"

            // 根据下列选项除全部以外的信息查询接口 
            if (this.user.namecn != "全部") {
                rul = "http://121.37.241.58:8883/logic/baseInfo/category/find" + this.user.namecn
            }


            this.$axios.get(rul).then(re => {
                console.log(re.data)
                this.UsersList = re.data
            });

        }

    }
}
</script> 
<style scoped> 
.header-all {
     padding: 0px;
     display: flex;
     justify-content: space-between;
     align-items: center;
}
</style>
